<template>
  <div v-title="'服务分类 - 世外生活运营平台'">
    <mk-breadcrumb :breadcrumb-data="breadcrumbData"></mk-breadcrumb>
    <el-scrollbar :wrapStyle="[{maxHeight:(bodyHeight-fixedHeightSmall)+'px'}]">
    <div class="PublicListStyle MkServeCategory">
      <div class="marginBottom-20 textAlignRight">
        <el-button type="primary" size="" class='btn-create' @click='addTopCategory'>添加一级分类</el-button>
      </div>
      <div element-loading-text="" v-loading="loadingTab">
        <div style='padding:0 20px;background-color:white;height:61px;line-height:60px;'>
          <div style="overflow: hidden;border-bottom:1px solid #f0f3f6;padding:0 0 0 50px;">
            <div style='font-size:14px;color:#81939e;padding-left:0px;float:left;'>分类名称</div>
            <div style='font-size:14px;color:#81939e;padding-left:0px;float:right;width:260px;'>排序</div>
            <div style='font-size:14px;color:#81939e;padding-left:0px;float:right;width:130px;'>是否显示</div>
            <div style='font-size:14px;color:#81939e;padding-left:0px;float:right;width:130px;'>分类图片</div>
            <div style='font-size:14px;color:#81939e;padding-left:0px;float:right;width:270px;'>描述</div>
          </div>
        </div>
        <el-row>
          <el-col :span='24' class='layoutStyle layoutStyle_left' style="padding-right:20px;padding-left:70px;">
            <el-scrollbar :wrapStyle="[{maxHeight:'730px'}]">
              <el-tree :data="dataArr" :props="defaultProps" node-key="id"
                       :default-expanded-keys="defaultKeys" :render-content='renderContent' @node-click="showDetail" :expand-on-click-node="false"></el-tree>
            </el-scrollbar>
          </el-col>
        </el-row>
      </div>

      <!-- 添加-->
      <mk-add-category :showDialog='dialogVisible_add'  v-on:closeDialog='closeDialog_add' :parentObj="parentObj"></mk-add-category>
      <!--详情-->
      <mk-category-detail :showDialog='dialogVisible_detail'  v-on:closeDialog='closeDialog_detail' :currentObjId="currentObjId"></mk-category-detail>
    </div>
    </el-scrollbar>
  </div>

</template>

<script>
  import MkBreadcrumb from '../../components/MkBreadcrumb.vue'
  import serveService from '../../services/serve'
  import MkAddCategory from './MkAddCategory.vue'
  import MkCategoryDetail from './MkCategoryDetail.vue'
  import { mapState } from 'vuex'
  export default {
    name: 'MkServeCategory',
    components: {
      MkBreadcrumb,MkAddCategory,MkCategoryDetail
    },
    computed: mapState({
      bodyHeight: state => state.global.bodyHeight,
      fixedHeightSmall: state => state.global.fixedHeightSmall
    }),
    methods: {
      showDetail(data) {
        this.currentObjId = data.id;
        this.dialogVisible_detail = true;
      },
      closeDialog_detail(type) {
        if(type) {
          this.loadData();
        }
        this.dialogVisible_detail = false;
      },
      closeDialog_add(type) {
        if(type) {
          this.loadData();
        }
        this.dialogVisible_add = false;
      },
      addTopCategory() {
        this.parentObj = null;
        this.dialogVisible_add = true;
      },
      append(data,event) {
        event.cancelBubble = true;
        event.stopPropagation();
        this.parentObj = {id:data.id,name:data.name};
        this.dialogVisible_add = true;
      },
      renderContent(h, { node, data, store }) {
        var hasImage = data.icon ? 'hasCheck' : 'hasClose';
        var isDisplay = data.status == 'ENABLE' ? 'ENABLE' : 'DISABLE';
        var hasNoAdd = data.parentIdPath.length == 4? 'hasNoAdd' : '';
        return (<div style='width:100%;'>
          <span style='font-size:14px;float:left;'>
          <span>{data.name}</span>
        </span>
        <span style="float: right; display:inline-block;width:130px;color:#3bc0c3;font-size:14px;">
          <span on-click={ () => this.append(data,event) }  style='padding:8.5px;' class='hoverColor' classname={hasNoAdd}>添加子类</span>
          </span>
          <span style="float: right; display:inline-block;font-size:14px;width:130px;">
          {data.weight}
          </span>
          <span style="float: right; display:inline-block;font-size:14px;width:130px;"  classname={isDisplay}>
          <i class='el-icon-check' style='padding:5 10px;color:#3bc0c3'></i>
          <i class='el-icon-close' style='padding:5 10px;color:#b6c2c9;'></i>
          </span>
          <span style="float: right; display:inline-block;color:#3bc0c3;font-size:14px;width:130px;" classname={hasImage}>
          <i class='el-icon-check' style='padding:5 10px;color:#3bc0c3'  ></i>
          <i class='el-icon-close' style='padding:5 10px;color:#b6c2c9;'></i>
          </span>
          <span style="float: right; display:inline-block;font-size:14px;width:240px;padding-right:30px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;">
          {data.des}
          </span>
          </div>);
      },
      loadData() {
        this.loadingTab = true;
        serveService.loadServeListServer({fields:'id,parentId,parentIdPath,name,icon,des,status,weight,defaulted,children'},data=>{
          this.dataArr=data.data;
//          console.log(this.dataArr);
          var arr=[];
          for(var i=0;i<this.dataArr.length;i++) {
            arr.push(this.dataArr[i].id)
          }
          this.defaultKeys=arr;
          this.loadingTab = false;
        })
      }
    },
    mounted: function() {
    },

    activated(){
      this.loadData();
    },

    data () {
      return {
        parentObj:{},
        currentObj: {},
        defaultKeys:[],
        dialogVisible_detail:false,
        dialogVisible_add: false,
        dataArr:[],
        loadingTab: false,
        defaultProps: {
          children: 'children',
          label: 'name',
        },
        breadcrumbData: {
          list: [
             {name:'服务管理',path: null, clickAble: false},
            {name: '服务分类',path: null, clickAble: false}
          ],
          returnData: {
            isReturn: false, path: null
          },
          iconName: 'service-icon',
        },
        currentObjId:'',
      }
    }
  }
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang='less'>
  .MkServeCategory{
    [classname = hasNoAdd] {
      visibility:hidden;
    }
    [classname=hasCheck],[classname=ENABLE]{
      .el-icon-check{
        display: inline;
      }
      .el-icon-close{
        display: none;
      }
    }
    [classname=hasClose],[classname=DISABLE]{
      .el-icon-check{
        display: none;
      }
      .el-icon-close{
        display: inline;
      }
    }
    .hoverColor{
      &:hover{
        color:#18878a;
      }
    }
  }


</style>
